import Taro, { Component } from '@tarojs/taro'
import { Picker, View, ScrollView } from '@tarojs/components'
import { AtButton, AtCard } from 'taro-ui'
import moment from 'moment';
import { getShiftPage } from './service'
import {approveStatusList} from './../../constant'
import './index.scss'

export default class attendance extends Component {

  config = {
    navigationBarTitleText: '调班查询',
  };

  scrollTop = 0;

  constructor(props) {
    super(props);
    this.state = {
      dataList: [],
      date: moment(new Date()).format('YYYY-MM'),
    }
  }

  componentWillMount () {

  }

  componentDidMount () {
    getShiftPage(this.state.date).then(res => {
      this.setState({dataList: res.list});
    })
  }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  onTimeChange(e) {
    this.setState({date: e.detail.value})
  }

  onScroll(e){
    console.log(e.detail)
  }

  onScrollToUpper() {
    console.log('滑动至顶部')
  }

  turnToApply() {
    Taro.navigateTo({
      url: '/pages/shift/apply/index'
    })
  }

  deleteApply = (id) => {

  };

  render () {
    return (
      <View>
        <View className='topBar'>
          <Picker mode='date' fields='month' value={this.state.date} onChange={this.onTimeChange.bind(this)}>
            <View className='picker'>
              {this.state.date} <View className='at-icon at-icon-chevron-down iconStyle'></View>
            </View>
          </Picker>
          <AtButton type='primary' size='small' onClick={this.turnToApply}>新增</AtButton>
        </View>
        <ScrollView
          className='scrollView'
          scrollY
          scrollWithAnimation
          scrollTop={this.scrollTop}
          onScrollToUpper={this.onScrollToUpper.bind(this)} // 使用箭头函数的时候 可以这样写 `onScrollToUpper={this.onScrollToUpper}`
          onScroll={this.onScroll}
        >
          {
            this.state.dataList &&
            this.state.dataList.map((item, index) => (
              <View className='card' key={index} style='margin: 15pt 0'>
              <AtCard
                title={approveStatusList.find(statusItem => statusItem.value===item.approveStatus).label}
              >
                <View className='card-content'>
                  <View className='contentItem'>
                    <View>调班时间:</View>
                    <View>{moment(item.shiftDate).format('YYYY-MM-DD')}</View>
                  </View>
                  <View className='contentItem'>
                    <View>调班人:</View>
                    <View>{item.shiftName}</View>
                  </View>
                  <View className='contentItem'>
                    <View>被调班人:</View>
                    <View>{item.beShiftName}</View>
                  </View>
                </View>
                <View className='card-btnBar'>
                  <View className='btn'>修改</View>
                  <View className='btn border'>发起</View>
                  <View className='btn' onClick={this.deleteApply(item.id)}>删除</View>
                </View>
              </AtCard>
              </View>
            ))
          }


        </ScrollView>
      </View>
    )
  }
}
